<template>
    <view class="content">
        <view class="info1-wrap">
            <view class="info1-wrap-info">
                <view class="info1-wrap-info-left">
                    <view class="name1">{{ state.info.name }}</view>
                    <view class="name2">{{ state.info.corporateName }}</view>
                </view>
                <view class="info1-wrap-info-right">
                    <view class="name1">{{ state.info.jobGroupName }}</view>
                    <view class="name2">¥{{ state.info.budgetAmount }}/全天</view>
                </view>
            </view>
            <view class="info1-wrap-list">
                <!-- <text class="text">实名已认证</text>
                <text class="text">学历已认证</text>
                <text class="text">实名已认证</text> -->
            </view>
            <view class="info1-wrap-footer">
                <view class="text">发布于{{ state.info.createTime }}</view>
            </view>
        </view>
        <view class="info2-wrap">
            <view>
                <view class="area">
                    <view class="line"></view>
                    <text class="text">职位描述</text>
                </view>
                <view class="content">
                    <view class="zwtext">{{ state.info.content }}</view>
                </view>
                <view class="area" style="margin-top: 32rpx;">
                    <view class="line"></view>
                    <text class="text">联系方式</text>
                </view>
                <view class="content">
                    <up-cell-group :border="false">
                        <up-cell title="邮箱" value="xie_0283@163.com" :border="false"></up-cell>
                        <up-cell title="手机号" value="13237976832" :border="false"></up-cell>
                    </up-cell-group>
                </view>
                <view class="area" style="margin-top: 32rpx;">
                    <view class="line"></view>
                    <text class="text">职位地址</text>
                </view>

                <view class="content">
                    <view class="address">江苏苏州市吴江区中山南路1777号</view>
                </view>
            </view>
        </view>
        <view class="fixed-action-wrap">
            <view class="fixed-action-wrap-icon">
                <up-icon name="share-square" size="28"></up-icon>
            </view>
            <view class="fixed-action-wrap-button" @click="state.popup=true">联系客服</view>
        </view>
        <up-popup v-model:show="state.popup" :round="24" mode="bottom" :closeable="true" @close="state.popup=false">
            <view class="popup-wrap">
                <image show-menu-by-longpress
                    src="http://106.53.65.140:8080/upload/6e51c219-d47c-45d3-9190-62145d394596.jpg" mode="scaleToFill"
                    class="qrcode" />
            </view>
        </up-popup>
    </view>
</template>
<script setup>
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const state = reactive({
    info: {},
    popup: false
})

onLoad((query) => {
    console.log(query)
    state.info = JSON.parse(query.info)

    console.log(state.info)
})
</script>

<style lang="scss">
page {
    background-color: #F5F5F5 !important;
    padding: 32rpx;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
::v-deep .u-cell__body{
    padding:14rpx 14rpx !important;
}
.info1-wrap {
    position: relative;
    width: 100%;
    // height: 246rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    &-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;

        &-left {
            .name1 {
                width: 100%;
                height: 40rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #323232;
                line-height: 33rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .name2 {
                width: 100%;
                height: 34rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #A09D9D;
                line-height: 28rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        &-right {
            .name1 {
                width: 100%;
                height: 34rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #323232;
                line-height: 34rpx;
                text-align: right;
                font-style: normal;
                text-transform: none;
            }

            .name2 {
                width: 154rpx;
                height: 40rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #F2CB51;
                line-height: 40rpx;
                text-align: right;
                font-style: normal;
                text-transform: none;
            }
        }
    }

    &-list {
        display: flex;
        align-items: center;
        margin-top: 14rpx;

        .text {
            margin-right: 20rpx;
            width: 136rpx;
            height: 42rpx;
            text-align: center;
            line-height: 42rpx;
            background: rgba(206, 206, 206, 0.4);
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #6D6D6D;
            font-style: normal;
            text-transform: none;
        }
    }

    &-footer {
        position: absolute;
        left: 20rpx;
        bottom: 20rpx;

        .text {
            width: 258rpx;
            height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #A09D9D;
            line-height: 23rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.info2-wrap {
    margin-top: 32rpx;
    width: 100%;
    // height: 552rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
}

.area {
    display: flex;
    align-items: center;

    .line {
        width: 8rpx;
        height: 32rpx;
        background: #F2CB51;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .text {
        margin-left: 20rpx;
        width: 128rpx;
        height: 44rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #323232;
        line-height: 38rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.content {
    padding: 24rpx 0;
}

.zwtext {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #626262;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.address {
    width: 370rpx;
    height: 34rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #626262;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.popup-wrap {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .qrcode {
        width: 380rpx;
        height: 360rpx;
    }
}

.fixed-action-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 128rpx;
    padding: 32rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;


    &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 480rpx;
        height: 80rpx;
        background: #F2CB51;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
}
</style>